<template>
  <div id='app'>
  <van-swipe :autoplay="3000" class="swipe">
  <van-swipe-item v-for="(image, index) in lbt" :key="index">
    <img v-lazy="image.image_url" />
  </van-swipe-item>
</van-swipe>

<van-grid  :column-num="5">
  <van-grid-item :icon="c.icon_url" :text="c.name" v-for="(c,i) in channel " :key="i" 
  @click="xiangq(c.id)"/>
</van-grid>
<div class="content" v-show="!show">
  品牌制造商数据
</div>
<div  class="footer1">
<div class="footer" v-for="(c,i) in list" :key="i">
  <img v-lazy="c.new_pic_url" alt="">
  <p class="price">{{c.floor_price}} <span v-show="!show">元起</span></p>
  <p class="name">{{c.name}}</p>


</div>
</div>


<van-loading text-color="#0094ff"  v-show="show" class="ll"/>


  </div>
</template>

<script>
export default {
  data () {
    return {
     list:[],
     lbt:[],
     channel:[],
     show:true
    }
  },
  methods: {
    get(){
      this.$axios('http://shop.bufantec.com/bufan/index/index','get').then(res=>{
        this.lbt=res.data.banner
        this.list=res.data.brandList
        console.log(this.list);
        this.channel=res.data.channel

        this.show=false

      })
    },
    xiangq(id){
      this.$router.push({path:'/fen',query:{id}})
    }

  },
  mounted() {
    this.get()

  },
  components: {

  }
}
</script>

<style lang='scss' >
.swipe{
  width: 100%;
  height: 200.8px;
  img{
    width: 100%;
    height: auto;
  }

}
.content{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}
.ll{
  position: fixed;
  left: 50%;
  top: 50%;
  transition: -50% -50%;
}
.footer{
  width: 48%;
 margin: 0 1%;
  position: relative;
.price{
position: absolute;
     left: 10px;
    top: 50px;
    font-weight: 600;
}
.name{
  position: absolute;
    left: 10px;
    top: 20px;
    font-weight: 600;

}
  
  img{
    width: 100%;
    height: auto;
   
   

  }

}
.footer1{
  width: 100%;
    display: flex;
  flex-wrap: wrap;
}

</style>
